<template>
	<view>
		<view style="margin: 20rpx 20rpx 0rpx 20rpx;">
			<u-button text="新增" type="primary" @click="onAdd"></u-button>
		</view>
		<template v-if="dataSource && dataSource.length">
			<view class="inforamtion" style="display: flex;" v-for="(item, index) in dataSource" :key="index">
				<view >
					<view class="option" style="width: 520rpx;">
						<view class="lf">业务编码</view>
						<view class="rl">{{ item.ywfl }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">业务名称</view>
						<view class="rl">{{ item.ywmc }}</view>
					</view>
				</view>
				<view  style="flex: 1; display: flex; align-items: center; justify-content: flex-end;">
					<u-icon name="edit-pen-fill" color="#2979ff" size="20" @click="onEdit(item, index)"></u-icon>
					<u-line  direction="col" length="20" margin="0 10rpx"></u-line>
					<u-icon name="trash-fill" color="#2979ff" size="20"  @click="onDelete(item, index)"></u-icon>
				</view>
			</view>
		</template>
		<view v-else>
			<u-empty
				mode="data"
				text="暂无数据"
				icon="/static/empty/data.png"
			></u-empty>
		</view>
		
		<!-- 弹窗表单 -->
		<u-popup :show="showPopupInput" @close="closePopupInput" :round="10">
			<view style="background-color: #ffffff; border-radius: 10px; padding: 30rpx;">
				<u--form
					:rules="rules"
					labelPosition="top"
					:model="model"
					ref="form"
					labelWidth="auto"
					:labelStyle="{
						fontSize: '14px',
						color: '#B2B2B2',
						lineHight: '20px'
					}"
				>
					<u-form-item
						label="业务编码"
						prop="ywfl"
						:borderBottom="false"
						ref="item1"
						required
						@click="onChoice"
					>
						<u--input
							disabled
							v-model="model.ywfl"
							placeholder="请选择业务分类"
							border="surround"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{color: '#B2B2B2'}"
							disabledColor="#ffffff"
						></u--input>
					</u-form-item>
					
					<u-form-item
						label="业务名称"
						prop="ywmc"
						:borderBottom="false"
						ref="item1"
						required
					>
						<u--input
							disabled
							v-model="model.ywmc"
							placeholder="请输入业务名称"
							border="surround"
							:suffixIconStyle="{color: '#B2B2B2'}"
						></u--input>
					</u-form-item>
				</u--form>
				<view style="padding:20rpx 0;">
					<u-button text="确定" type="primary" @click="onConfirmPopupInput"></u-button>
				</view>
			</view>
		</u-popup>
		<qian-tree
			ref="qiantree" 
			lazy 
			:selectParent="true" 
			:multiple="false" 
			:range="getFilesBusinessCategoryList" 
			:foldAll="true" 
			idKey="categoryCode"
			rangeKey="categoryName"
			@confirm="treeConfirm"
			@cancel="treeCancel"
		></qian-tree>
	</view>
</template>

<script>
import qianTree from '@/components/qian-tree/qian-tree.vue';

import {
	filesBusinessCategoryList, // 业务分类列表
	
} from '@/api/index.js'
export default {
	props: {
		dataList: {
			type: [Array],
			default: () => [],
		},
		
	},
	data() {
		return {
			showPopupInput: false, // 表单弹窗
			getFilesBusinessCategoryList: [], // 业务分类列表
			model: {
				ywfl: '',
				ywmc: ''
			},
			
			rules: {
				ywfl: [
					{ required: true, message: '请选择业务分类!', trigger: ['change','blur'], },
				],
				ywmc: [
					{ required: true, message: '请输入业务名称!', trigger: ['change','blur'], },
				],
			},
			dataSource: [], // 数组
			editIndex: 0, // 编辑的下标
		};
	},
	components: {
		qianTree
	},
	onLoad(options) {
		this.getList()
	},
	watch: {
		dataList: {
			handler (val) {
				if (val && val.length) {
					this.dataSource = val
				}
			},
			immediate: true
		}
	},
	methods: {
		// 获取业务分类列表
		getList() {
			filesBusinessCategoryList().then(res => {
				if (res.success) {
					this.getFilesBusinessCategoryList = res.result
				}
			})
		},
		
		// 新增
		onAdd () {
			this.model = {
				ywfl: '',
				ywmc: ''
			}
			this.getList()
			this.showPopupInput = true
		},
		// 编辑
		onEdit (item, index) {
			this.editIndex = index
			this.model = {...item}
			this.getList()
			this.showPopupInput = true
		},
		// 删除
		onDelete (item, index) {
			var _this = this
			uni.showModal({
				content: '确定删除吗？',
				success (res) {
						if (res.confirm) {
							_this.dataSource.splice(index, 1);
						} else if (res.cancel) {
							// 用户点击取消
						}
					}
			})
			
		},
		closePopupInput () {
			this.showPopupInput = false
		},
		onConfirmPopupInput () {
			this.$refs.form.validate().then(res => {
				if(res){
					if (!this.model.id) {
						this.model.id = parseInt(Math.random() * 1000000000000);
						this.dataSource.push(this.model);
					} else {
						this.dataSource.splice(this.editIndex, 1, this.model);
					}
					this.showPopupInput = false
					this.$emit('ok', this.dataSource)
				}
			})
		},
		
		// 点击选择
		onChoice () {
			this.showPopupInput = false
			this.$refs.qiantree._show();
		},
		
		treeConfirm (item, index) {
			this.$set(this.model, 'ywfl', item[0].id)
			var serviceName = ''
			if (item[0] && item[0].parents && item[0].parents.length) {
				serviceName = item[0].parents[0].name + '/' + item[0].name
			} else {
				serviceName = item[0].name
			}
			this.$set(this.model, 'ywmc', serviceName)
			this.showPopupInput = true
		},
		treeCancel () {
			this.showPopupInput = true
		}
	}
};
</script>

<style lang="scss" scoped>
	.inforamtion{
		margin-top: 10rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
	}
</style>